<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <style>
        html,body{
            font-family: '微软雅黑','Courier New', Courier, monospace;
        }
        .jiequ {
            background-color: red;
            width: 100px;
            height: 38px;
            overflow:hidden;
            position: relative;
        }
        .danhang{
            margin-top: 20px;
            width: 100px;
            background-color: cadetblue;
            height: 20px;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .duohang{
            margin-top: 20px;
            width: 100px;
            background-color: cadetblue;
            height: 38px;

            overflow: hidden;
            text-overflow: ellipsis;

            display: -webkit-box;/* 将元素转换为弹性伸缩盒 */ 
            -webkit-line-clamp: 2;/* 文本内容显示的行数 */ 
            -webkit-box-orient: vertical;/* 弹性伸缩盒子元素排列方式 */ 
        }
    </style>
</head>

<body>
    <div class="jiequ">
        hgiewfi五号给IP呢2-39好高级哦碰面-3好0解构gh0th
    </div>

    <div class="danhang">
        30g2hnivff-139hjofqm[j1go3]31jgpoj
    </div>

    <div class="duohang">
        0329hgnqivmmgk=103j-gqmo[g-3931ghjom]310q9gpjo
    </div>

    <script>
        let aa=document.querySelector(".jiequ");
        let jiequ=document.querySelector(".jiequ").innerText;
        console.log(jiequ);
        let tihuan=jiequ.substr(0,16);
        console.log(tihuan);
        aa.innerText=tihuan+'...';

    </script>
</body>

</html>